<template>
    <div class="app-container">
        <!-- 查询表单 -->
        <el-card>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="站点名称：">
                        <el-input v-model="queryForm.siteName" placeholder="请输入站点名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="监测时间：">
                        <el-date-picker v-model="queryForm.timeRange" type="datetimerange" range-separator="至"
                            start-placeholder="开始时间" end-placeholder="结束时间" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
                    <el-button icon="RefreshRight" @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
        </el-card>

        <!-- 操作区域 -->
        <el-card style="margin: 20px 0;">
            <el-row justify="space-between" class="table-actions">
                <el-col :span="2">
                    <el-button icon="Setting" plain>列配置</el-button>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="sortField" placeholder="监测时间">
                        <el-option label="监测时间" value="time" />
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="sortOrder" placeholder="排序">
                        <el-option label="升序" value="asc" />
                        <el-option label="降序" value="desc" />
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" icon="Refresh" @click="fetchData">刷新数据</el-button>
                </el-col>
            </el-row>
        </el-card>
        <!-- 数据表格 -->
        <el-card>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="站点ID" width="120" />
                <el-table-column prop="name" label="站点名称" width="200" />
                <el-table-column prop="time" label="监测时间" sortable width="200" />
                <el-table-column prop="pressure" label="压力(MPa)" width="120" />
                <el-table-column prop="flow" label="流量(m³/h)" width="140" />
                <el-table-column prop="ph" label="pH值" width="100" />
                <el-table-column prop="chlorine" label="余氯(mg/L)" width="140" />
                <el-table-column label="操作" width="120">
                    <template #default="{ row }">
                        <el-link type="primary" @click="viewDetails(row)">查看详情</el-link>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-row justify="end" style="margin-top: 20px;">
                <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.pageSize"
                    :total="pagination.total" layout="prev, pager, next, sizes, jumper" @size-change="handleSizeChange"
                    @current-change="handlePageChange" />
            </el-row>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";

// 查询表单数据
const queryForm = ref({
    siteName: "",
    timeRange: []
});

// 表格数据
const tableData = ref([]);

// 分页配置
const pagination = ref({
    page: 1,
    pageSize: 10,
    total: 0
});

// 排序字段
const sortField = ref("time");
const sortOrder = ref("desc");

// 获取数据（模拟 API 请求）
const fetchData = () => {
    tableData.value = [
        {
            id: "SITE001",
            name: "清华大学站点",
            time: "2024-01-20 10:00:00",
            pressure: 0.5,
            flow: 120.5,
            ph: 7.2,
            chlorine: 0.3
        },
        {
            id: "SITE002",
            name: "北京大学站点",
            time: "2024-01-20 10:00:00",
            pressure: 0.6,
            flow: 150.2,
            ph: 7.1,
            chlorine: 0.4
        }
    ];
    pagination.value.total = tableData.value.length;
};

// 处理查询
const handleSearch = () => {
    ElMessage.success("查询成功");
    fetchData();
};

// 处理重置
const handleReset = () => {
    queryForm.value = { siteName: "", timeRange: [] };
    fetchData();
};

// 处理分页
const handleSizeChange = (size) => {
    pagination.value.pageSize = size;
    fetchData();
};
const handlePageChange = (page) => {
    pagination.value.page = page;
    fetchData();
};

// 查看详情
const viewDetails = (row) => {
    ElMessage.info(`查看 ${row.name} 详情`);
};

// 挂载时获取数据
onMounted(fetchData);
</script>

<style scoped>
.app-container {
    /* padding: 20px;
    background: #fff;
    border-radius: 8px; */
}

.query-form {
    margin-bottom: 20px;
}

.table-actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.el-form-item {
    margin-bottom: 0px;
}


.table-actions {
    margin-bottom: 0px;
}
</style>